<template>
  <div class="Echarts">
    <div id="main" ref="two" style="width: 1000px;height:500px;"></div>
  </div>
</template>

<script>

import {inject, reactive, onMounted, getCurrentInstance} from 'vue'

export default {
  name: "Two",
  setup() {

    let $echarts = inject("echarts");
    let $http = inject("axios");
    let {proxy} = getCurrentInstance()

    let testData = reactive({})
    let xyData = reactive([])

    onMounted(() => {
      getData()
    })

    function initChart() {
      let chart = $echarts.init(proxy.$refs.two);
      chart.setOption({
        tooltip: {
          show:true
        },
        title: {
          text: '1998年第一季度各地区消费总额占比',
          left: 'center'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series:{
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: xyData.map(
              item => {
                return{
                  name:item.regionname,
                  value:item.totalconsumption
                }
              }
          )
        }
      });
    }

    let getData = function () {
      $http({
        url: "http://101.43.144.48:6789/api/data",
        method: "post",
        data: {
          "start": 199801,
          "end": 199803
        }
      }).then((res) => {
        testData = res.data
        filter()
        console.log(testData)
        console.log(xyData)
        initChart()
      })
    }

    let filter = function () {
      x:for (let data of testData) {
        for (let datan of xyData) {
          if (data.regionname === datan.regionname) {
            xyData.totalconsumption += xyData.totalconsumption
            continue x
          }
        }
        xyData.push({
          regionname: data.regionname,
          totalconsumption: data.totalconsumption
        })
      }
    }
  }
}
</script>
